<div nz-row [nzGutter]="8">
  <div nz-col class="gutter-row" [nzSpan]="6">
    <nz-tree [nzData]="nodes" nzAsyncData nzBlockNode (nzClick)="handlerNodeClick($event)"
             (nzExpandChange)="handlerNodeLoad($event)" nzVirtualHeight="{{outerHeight}}px"
             [nzTreeTemplate]="nzTreeTemplate">
    </nz-tree>
    <ng-template #nzTreeTemplate let-node let-origin="origin">
      <i (contextmenu)="handlerContextMenu($event, menu, origin)"
         class="fa fa-{{origin.type}}">&nbsp;{{origin.title}}&nbsp;<em *ngIf="origin?.children"
                                                                                         class="f50">({{origin?.children.length}})</em></i>
    </ng-template>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu>
        <div *ngFor="let item of contextMenus">
          <div *ngIf="item?.children; else notHasChildren">
            <li nz-submenu [nzTitle]="subMenuTitle">
              <ul>
                <li *ngFor="let item of item.children" nz-menu-item (click)="handlerContextMenuClick(item)">
                  <i class="fa fa-{{item.icon}}"></i>&nbsp;{{item.title}}
                </li>
              </ul>
            </li>
            <ng-template #subMenuTitle>
              <i class="fa fa-{{item.icon}}"></i>&nbsp;{{item.title}}
            </ng-template>
          </div>
          <ng-template #notHasChildren>
            <li nz-menu-item (click)="handlerContextMenuClick(item)">
              <i class="fa fa-{{item.icon}}"></i>&nbsp;{{item.title}}
            </li>
          </ng-template>
        </div>
      </ul>
    </nz-dropdown-menu>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="18">
    <div class="inner-box">
      <app-component-antd-empty *ngIf="!selectNode; else hasComponentValue"></app-component-antd-empty>
      <ng-template #hasComponentValue>
        <nz-card nzTitle="{{selectNode.title}}" [nzExtra]="rightTemplate">
          <nz-alert *ngIf="rootNode?.sourceType === dataSourceType.mysql"
                    nzMessage="{{'alert.supported_engine_total_index_percentage'|translate}}"
                    style="margin-bottom: 10px;"></nz-alert>
          <nz-skeleton *ngIf="loading.button; else hasSuccessTemplate" [nzActive]="true"></nz-skeleton>
          <ng-template #hasSuccessTemplate>
            <app-component-antd-empty *ngIf="items?.length <= 0; else hasLoadTemplate">
            </app-component-antd-empty>
            <ng-template #hasLoadTemplate>
              <nz-table nzPageSize="20" #progressItemsTable [nzData]="items">
                <tbody nz-row nzJustify="space-around" [nzGutter]="[16, 16]">
                <tr *ngFor="let item of progressItemsTable.data; let i = index" nz-col nzSpan="6">
                  <nz-card nzTitle="{{ (i + 1) + ': ' + item.name }}">
                    <nz-progress nz-popover [nzPopoverContent]="progressPopoverContent" nzType="circle"
                                 [nzPercent]="item.value"
                                 [nzStrokeColor]="{ '0%': '#87d068', '50%': '#d9651f', '100%': '#fc0202' }">
                    </nz-progress>
                    <ng-template #progressPopoverContent>
                      <nz-descriptions [nzTitle]="item.name" nzBordered [nzColumn]="1" nzSize="small">
                        <nz-descriptions-item *ngFor="let key of handlerKeys(item)" [nzTitle]="key">
                          {{item[key]}}
                        </nz-descriptions-item>
                      </nz-descriptions>
                    </ng-template>
                  </nz-card>
                </tr>
              </nz-table>
            </ng-template>
          </ng-template>
        </nz-card>
        <ng-template #rightTemplate>
          <nz-switch [(ngModel)]="switchType"
                     *ngIf="selectNode.origin.type === 'disk' || selectNode.origin.type === 'server' "
                     nzCheckedChildren="{{'common.disk'|translate}}"
                     nzUnCheckedChildren="{{'common.database'|translate}}"
                     (ngModelChange)="handlerNodeClick($event)">
          </nz-switch>
        </ng-template>
      </ng-template>
    </div>
  </div>
</div>
<app-component-info-server *ngIf="disabledComponent.server" [visible]="disabledComponent.server" [config]="rootNode"
                           (emitter)="handlerContextMenuClose()">
</app-component-info-server>
<app-component-database *ngIf="disabledComponent.database.create" [visible]="disabledComponent.database.create"
                        [config]="rootNode"
                        [node]="selectNode" [menu]="selectMenu"
                        (emitter)="handlerContextMenuClosed($event)">
</app-component-database>
<app-component-database-drop *ngIf="disabledComponent.database.delete" [visible]="disabledComponent.database.delete"
                             [config]="rootNode" [value]="selectNode?.origin?.key"
                             [node]="selectNode" [menu]="selectMenu"
                             (emitter)="handlerContextMenuClosed($event)">
</app-component-database-drop>
<app-component-database-structure *ngIf="disabledComponent.database.structure"
                                  [visible]="disabledComponent.database.structure" [config]="rootNode"
                                  [value]="selectNode?.origin?.key"
                                  (emitter)="handlerContextMenuClose()">
</app-component-database-structure>
<app-component-common-database *ngIf="disabledComponent.database" [visible]="disabledComponent.database.common"
                               [config]="rootNode" [value]="selectNode" [database]="database" [menu]="selectMenu"
                               (emitter)="handlerContextMenuClosed($event)">
</app-component-common-database>
<app-component-common-table *ngIf="disabledComponent.table" [visible]="disabledComponent.table" [config]="rootNode"
                            [value]="selectNode" [database]="database" [menu]="selectMenu"
                            (emitter)="handlerContextMenuClosed($event)">
</app-component-common-table>
<app-component-common-column *ngIf="disabledComponent.column" [visible]="disabledComponent.column" [config]="rootNode"
                             [value]="selectNode" [database]="database" [table]="table" [menu]="selectMenu"
                             (emitter)="handlerContextMenuClosed($event)">
</app-component-common-column>
